<!DOCTYPE html>
<!-- 样式绑定 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="utils/vue.js">
		</script>
		<style type="text/css">
			.active {
				width: 100px;
				height: 100px;
				background: green;
			}

			.text-danger {
				background: red;
			}

			.base {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			demo1
			<div v-bind:class="{'active':isActive}"></div>
			demo2
			<!-- 在对象中传入多个属性来动态切换多个class -->
			<div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>
			demo3
			<div class="static active text-danger"></div>
			demo4
			<!-- 直接绑定数据里的一个对象 -->
			<div :class="classObject"></div>
			demo5
			<!-- computed方式 -->
			<div :class="classObject2"></div>
			demo6
			<!-- 数组语法 -->
			<div v-bind:class="[activeClass, errorClass]"></div>
			
			<!-- 内联样式 -->
			demo7
			<div style="background: gold;width: 50px; height: 20px;">双双</div>
			<div v-bind:style="{color:activeColor,width:widthSize+'px',height:heightSize+'px',fontSize:fontSize+'px'}">双双</div>
			<br>
			<!-- 直接绑定到一个样式对象，让模板更清晰： -->
			<div :style="styleObject">双双</div>
			<!-- v-bind:style 可以使用数组将多个样式对象应用到一个元素上： -->
			<div :style="[baseStyles, overridingStyles]">双双</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isActive: 1,
					hasError: 1,
					// demo4
					classObject: {
						active: true, //className:attributesValue
						'text-danger': 0 //className:attributesValue
					},
					// demo5
					error: {
						value: true,
						type: 'fatal'
					},
					// demo6
					activeClass: 'active',
					errorClass: 'text-danger',
					// demo7
					activeColor: 'blue',
					widthSize: 100,
					heightSize: 20,
					fontSize: 30,
					styleObject:{
						color: 'green',
						fontSize: '40px',
					},
					baseStyles:{
						color: 'red',
						fontSize: '40px',
					},
					overridingStyles:{
						'font-weight':'bold'
					}
				},
				computed: {
					// demo5
					classObject2: function() {
						return {
							base: true,
							active: this.isActive && this.error.value,
							'text-danger': this.error.value && this.error.type === 'fatal'
						}
					}
				},
				methods: {

				},
				filters: {

				},
				watch: {

				},
			});
			vm.$watch('', function(arg1, arg2) {

			});
		</script>
	</body>
</html>
